<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>云+-首页</title>
    <link rel="stylesheet" th:href="@{/front/lib/amazeui/assets/css/amazeui.css}"/>
    <link rel="stylesheet" th:href="@{/front/css/hp.css}" />
    <link rel="stylesheet" th:href="@{/front/js/layui/css/layui.css}">
    <script th:src="@{/front/lib/amazeui/assets/js/jquery.min.js}"></script>
    <script th:src="@{/front/lib/layer/layer.js}"></script>
    <script th:src="@{/front/lib/amazeui/assets/js/amazeui.js}"></script>
    <script th:src="@{/front/lib/amazeui/pagination/amazeui-pagination.js}"></script>
    <style>
        #footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 49px;
            line-height: 49px;
            z-index: 1010;
        }
    </style>
</head>
<body>
<div id="navigate" th:include="/front/navigationBar"></div>
<div class="layui-carousel "style="margin:0 auto; text-align: center" id="test1" >
    <div carousel-item="">
        <div><img th:src="@{/front/img/index/91.jpg}" ></div>
        <div><img th:src="@{/front/img/index/92.jpg}"></div>
        <div><img th:src="@{/front/img/index/93.jpg}"></div>
        <div><img th:src="@{/front/img/index/94.jpg}"></div>
    </div>
</div>
<div>
    <div class="hp-body-area" style="height: 450px">
        <div class="am-g">
            <ul class="am-avg-lg-4 am-thumbnails">
                <div class="layui-bg-cyan" style="height: 70px ;">
                    <p style="text-align: center ;font-size: 40px;float: bottom">小区精选</p>
                </div>
                <li>
                    <a th:href="@{/front/main}">
                    <br>
                    &emsp;&emsp;&emsp;
                <img th:src="@{/front/img/index/001.jpg}" alt="这是个图片"/>
                    <b>
                      <p style="font-size: 20px ;font-family: 微软雅黑">&emsp;&emsp;&emsp;恒大绿洲</p>
                    </b>
                        <p>&emsp;&emsp;&emsp;&emsp;&nbsp;2006建</p>
                    </a>
                </li>
                <li>
                    <a th:href="@{/front/main}">
                    <br>
                    &emsp;&emsp;&emsp;&emsp;&emsp;
                <img th:src="@{/front/img/index/002.jpg}" alt="这是个图片"/>
                    <b>
                        <p style="font-size: 20px ;font-family: 微软雅黑">&emsp;&emsp;&emsp;&emsp;恒大绿洲</p>
                    </b>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2006建</p>
                    </a>
                </li>
                <li>
                    <a th:href="@{/front/main}">
                <br>
                    &emsp;&emsp;&emsp;&emsp;&emsp;
                <img th:src="@{/front/img/index/003.jpg}" alt="这是个图片"/>
                    <b>
                        <p style="font-size: 20px ;font-family: 微软雅黑">&emsp;&emsp;&emsp;&emsp;恒大绿洲</p>
                    </b>
                    <p> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2006建</p>
                    </a>
                </li>
                <li>
                    <a th:href="@{/front/main}">
                <br>
                    &emsp;&emsp;&emsp;&emsp;&emsp;
                <img th:src="@{/front/img/index/004.jpg}" alt="这是个图片"/>
                    <b>
                        <p style="font-size: 20px ;font-family: 微软雅黑">&emsp;&emsp;&emsp;&emsp;恒大御湖半岛</p>
                    </b>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;2011建</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>
<div>
    <div class="hp-body-area " style="height: 440px">
        <div class="am-g">
            <ul class="am-avg-lg-4 am-thumbnails">
                <div class="layui-bg-cyan" style="height: 70px ;">
                    <p style="text-align: center ;font-size: 40px;float: bottom">品质租房</p>
                </div>

                <li>
                    <a th:href="@{/front/main}">
                    <br>
                    &emsp;&emsp;&emsp;
                    <img th:src="@{/front/img/index/005.jpg}" alt="这是个图片"/>
                    <b>
                        <p style="font-size: 20px ;font-family: 微软雅黑">&emsp;&emsp;&emsp;整租·未来城 1室0厅</p>
                    </b>
                    <p>&emsp;&emsp;&emsp;&emsp;&nbsp;1200 元/月</p>
                    </a>
                </li>
                <li>
                    <a th:href="@{/front/main}">
                    <br>
                    &emsp;&emsp;&emsp;&emsp;&emsp;
                    <img th:src="@{/front/img/index/006.jpg}" alt="这是个图片"/>
                    <b>
                        <p style="font-size: 20px ;font-family: 微软雅黑">&emsp;&emsp;&emsp;&emsp;整租·武汉天街 2室2厅</p>
                    </b>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;3600 元/月</p>
                    </a>
                </li>
                <li>
                    <a th:href="@{/front/main}">
                    <br>
                    &emsp;&emsp;&emsp;&emsp;&emsp;
                    <img th:src="@{/front/img/index/007.jpg}" alt="这是个图片"/>
                    <b>
                        <p style="font-size: 20px ;font-family: 微软雅黑">&emsp;&emsp;&emsp;&emsp;整租·万景国际 2室1厅</p>
                    </b>
                    <p> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;3400 元/月</p>
                    </a>
                </li>
                <li>
                    <a th:href="@{/front/main}">
                    <br>
                    &emsp;&emsp;&emsp;&emsp;&emsp;
                    <img th:src="@{/front/img/index/006.jpg}" alt="这是个图片"/>
                    <b>
                        <p style="font-size: 20px ;font-family: 微软雅黑">&emsp;&emsp;&emsp;&emsp;整租·海伦广场 3室2厅</p>
                    </b>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;4400 元/月</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>
<div id="footer"class="layui-bg-gray" style="height:70px">
    <div class="layui-card-body">
        <div style="text-align: left ;width: 115px ;float: left" >
<br>
                <i class="layui-icon layui-icon-service "style="font-size: 50px;"></i>客服咨询
        </div>

        <div style="text-align: right ; width: 190px ;float: right" >
                <i class="layui-icon layui-icon-tips"style="font-size: 20px; text-align: left"></i>说明：此平台仅提供服务，一切解释权归云租房所有。
        </div>

    </div>
</div>

<script th:src="@{/front/js/layui/layui.js}"></script>
<script>
    layui.use('element', function(){
        let element = layui.element ;//导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    })
    layui.use(['carousel', 'form'], function() {
        let carousel = layui.carousel
            , form = layui.form;
        //图片轮播
        carousel.render({
            elem: '#test1'
           ,margin: "0px"
            , width: '100%'
            , height: '600px'
            , interval: 1700
        });
    })
</script>

</body>
</html>